<template>
  <div>
    <div>
      <el-button type="primary" @click="pop_click" style="margin-right: 20px">选择</el-button>
      <el-tag>{{ $data.item }}</el-tag>
    </div>

    <el-dialog v-model="$data.dlg_show" title="数据库" width="80vw">
      <div class="pl" v-for="(tables, group,index)  in $data.groups" :key="group">
        <div class="ti">{{ group }}</div>

        <div class="row">
          <el-radio-group v-model="$data.selected">
            <el-radio :label="table" v-for="table in tables" :key="table"></el-radio>
          </el-radio-group>
        </div>
      </div>

      <div style="text-align: center;margin: 10px;">
        <el-button type="primary" @click="ok_click">确 定</el-button>
        <el-button @click="$data.dlg_show=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
/**
 * Created by CodeGenerator at 2021-04-13 19:37:26
 */


defineOptions({
  name: "collectionRef",
  inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();


//定义data
const $data = reactive({"dlg_show": false, "selected": "", "item": "", "groups": {}});


const $props = defineProps({
  data: {type: Object}
});


const $model = defineModel({type: [Array, String]});


const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue", "loaded"]);


const pop_click = function () {
  var p = {};
  $emit("click", p);
  if (p.returnValue === false) {
    return;
  }
  // var res = this.$parent[$props.conn];
  // if (res) {
  //     $data.groups = res;
  //     $data.dlg_show = true;
  //     console.log("cached!")
  //     return;
  // }

  jv.$http.post("/dev/mongo/group-tables/" + $props.data.id ).then(res => {
    $data.groups = res.data.data;
//合并单表。
    join_solo();

    $data.dlg_show = true;
  })
};
const join_solo = function () {
  var gs = $data.groups;
  var solo = [];
  Object.keys(gs).forEach(it => {
    var value = gs[it];
    if (value.length === 1) {
      solo.addAll(value);
      delete gs[it];
    }
  });
  gs["其它"] = solo;
  $data.groups = gs;
};
const ok_click = function () {

  $data.item = $data.selected;
  $data.dlg_show = false;
  $emit("update:modelValue", $data.item)
};
const procData = function (res, op) {
  var json = res.data.data;
  json.forEach(it => {
//如果是组合实体，设置 it.id=...
  });
};

onMounted(() => {
  $data.item = $model;
  $data.selected = $model;
})


</script>

<style lang="scss" scoped>
/*productline*/
.pl {
  border-bottom: solid 1px gray;
  margin: 8px;
  display: inline-block;
  padding: 4px;
  white-space: pre-wrap;
  word-break: break-all;
  border-radius: 10px;
  position: relative;
  z-index: 9;
}

/*title*/
.ti {
  font-weight: bold;
  margin: 4px;
  display: inline-block;
  border-radius: 8px;
  background-color: darkblue;
  padding: 2px 5px;
  color: white;
}

.row {
  display: block;
  font-size: small;
  margin-left: 16px;
}

.pl:before {
  content: " ";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0.3;
  border-radius: 10px;
  z-index: -999;
}

.pl:nth-of-type(5n+1):before {
  background-color: #75f0fc;
}

.pl:nth-of-type(5n+2):before {
  background-color: #fdeeaa;
}

.pl:nth-of-type(5n+3):before {
  background-color: #b5b3ff;
}

.pl:nth-of-type(5n+4):before {
  background-color: #8cfec0;
}

.pl:nth-of-type(5n):before {
  background-color: #feb9bd;
}

a {
  background-color: #485385;
  padding: 0 4px;
  margin: 2px 4px;
  color: white;
  display: inline-block;
  border-radius: 5px;
  text-decoration: none;
  zoom: 1.02;
}

</style>